<template>
  <div id="app">
    <div
      id="st-container"
      class="st-container st-effect-2"
      :class="isMenuShow?'st-menu-open':''"
      @click="closeMenu"
    >
      <nav class="st-menu st-effect-2" id="menu-2">
        <div id="header-info">
          <div class="header-logo">
            <a href="/">
              <img src="@/assets/logo.jpeg" alt="极品图" title="极品图" show="force">
            </a>
          </div>
          <div class="header-info-content">
            <p class="site">极品图</p>
            <p class="name">美女图片每日更新</p>
          </div>
        </div>
        <ul id="menu-ease-mobile" class="menu">
          <li class="current-menu-item" v-for="(item,index) in menuItems" :key="index">
            <router-link :title="item.name" :to="{ name:'list',params: { type: item.id},query: { cid: $store.state.cid }}" aria-current="page" >
              <i></i>{{item.name}}
            </router-link>
          </li>
        </ul>
      </nav>
      <div class="st-pusher">
        <div class="st-content">
          <div class="st-content-inner">
            <header id="header">
              <div id="nav-menu-switcher" @click.stop="switchMenu">
                <button data-effect="st-effect-5" class="header-left fa fa-reorder fa-lg"></button>
              </div>
              <h1>
                <a class="site-name" href="/">极品图</a>
              </h1>
              <!-- <div id="menu-search" onclick="Displaysearch();">
                <button data-effect="st-effect-5" class="header-right fa fa-search fa-lg"></button>
              </div> -->
            </header>

            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
    <vueToTop color="white"></vueToTop>
  </div>
</template>
<script>
import vueToTop from "vue-totop";

export default {
  components: {
    vueToTop
  },
  data() {
    return {
      menuItems:[],
      current:1,
      isMenuShow: false,
      loading: true
    };
  },
  methods: {
    switchMenu() {
      this.isMenuShow = !this.isMenuShow;
    },
    closeMenu() {
      this.isMenuShow = false;
    },
    setCid(cid){
      this.$store.commit('mutationsSetCid',cid);
    }
  },
  created(){
    if(this.$utils.getUrlKey('cid')){
      this.setCid(this.$utils.getUrlKey('cid'))
    }
    let cid = this.$utils.getUrlKey('cid')||this.$store.state.cid;
        console.log(cid)

    let url = `/api/img/type?cid=${cid}`
    this.$http.get(url).then(res => {
      this.menuItems = res.data;
    });
  },
};
</script>


<style lang="scss">
@import "assets/css/style.css";
</style>
